<template>
    <transition >
        <div class="power-box">
            <el-row>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        主页
                    </el-breadcrumb-item>

                    <el-breadcrumb-item>
                        系统管理
                    </el-breadcrumb-item>

                    <el-breadcrumb-item>
                        权限管理
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            <el-row>

                <el-col :span="24">
                    <el-form label-width="60">
                        <el-row>

                            <el-col :span="8">
                                <el-form-item label="用户名">
                                    <el-input></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="权限">
                                    <el-select></el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item >
                                    <el-button type="primary" class="btn-query">搜索</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>

            </el-row>
            <el-row>


                <el-button-group>
                    <el-button type="success">新增</el-button>
                    <el-button type="warning">导出</el-button>
                    <el-button type="danger">导入</el-button>
                    <el-button type="info">打印</el-button>
                </el-button-group>
                <el-table
                        :data="data.powers"
                        border stripe
                        height="260"
                >
                    <el-table-column prop="name" label="用户名"></el-table-column>
                    <el-table-column prop="url" label="权限"></el-table-column>
                    <el-table-column prop="descr" label="权限"></el-table-column>
                    <el-table-column>

                        <template #default>

                            <el-button type="warning"><i class="fal fa-edit" />修改</el-button>
                            <el-button type="danger">删除</el-button>
                            <el-button type="success">启用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        layout="prev, pager, next"
                        v-model:current-page="data.page.current"
                        v-model:page-size="data.page.pageSize"
                        v-model:page-count="data.page.total"
                        @current-change="currentChange"
                ></el-pagination>

            </el-row>
        </div>
    </transition>
</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";

import request from '@/utils/request'

const data = reactive({
    powers: [],
    page: {
        username: '',
        current: new Number(1),
        pageSize: 3,
        total: 10
    }
})

let getDataForTable = () => {
    request({
        url: '/power/page',
        method: 'get',
        params: data.page
    }).then((res:any) => {
        data.powers = res.data.data;
        data.page.total = res.data.total;
        //   alert(data.page.total);
    })
}

onMounted(() => {
    request({
        url:'/power/list',
        method:'get'
    }).then((res)=>{
        data.powers=res.data.data;
    })

})
let currentChange = (current: Number) => {

    data.page.current = current;
    getDataForTable();
}

</script>

<style scoped>

</style>